<template>
  <div class="dealDtl">
    <swipeout>
      <flexbox orient="vertical">
        <flexbox-item v-for="item in orderList">
          <div class="flex-demo">
            <swipeout-item transition-mode="follow">
              <div slot="right-menu">
                <swipeout-button @click.native="onDel(item.orderId)" class="fr" type="warn" :width="50">删除</swipeout-button>
              </div>
              <div slot="content" class="demo-content vux-1px-t">
                <flexbox orient="vertical" class="order">
                  <flexbox-item>
                    <div class="flex-demo bd" >
                      <span>订单号：{{item.orderId}}</span>
                    </div>
                  </flexbox-item>
                  <flexbox-item>
                    <div class="flex-demo bd">
                      <flexbox>
                        <flexbox-item>
                          <div class="flex-demo"><span>品牌：{{item.orderBrand}}</span></div>
                        </flexbox-item>
                        <flexbox-item>
                          <div class="flex-demo"><span>鞋号：{{item.orderSize}}</span></div>
                        </flexbox-item>
                        <flexbox-item>
                          <div class="flex-demo"><span>数量：{{item.orderNum}}</span></div>
                        </flexbox-item>
                      </flexbox>
                    </div>
                  </flexbox-item>
                  <flexbox-item>
                    <div class="flex-demo bd">
                      <flexbox>
                        <flexbox-item>
                          <div class="flex-demo"><span>颜色：{{item.orderColor}}</span></div>
                        </flexbox-item>
                        <flexbox-item>
                          <div class="flex-demo"><span>价格：{{item.orderPrice}}</span></div>
                        </flexbox-item>
                        <flexbox-item>
                          <div class="flex-demo"><span>性别：{{item.orderGender}}</span></div>
                        </flexbox-item>
                      </flexbox>
                    </div>
                  </flexbox-item>
                  <flexbox-item>
                    <div class="flex-demo bd">
                      <span>备注：{{item.orderContent}}</span>
                    </div>
                  </flexbox-item>
                  <flexbox-item>
                    <div class="flex-demo">
                      <span>交易时间：{{item.orderDate}}</span>
                      <!--颜色：<span v-for="tp in item.stockStatus"><o v-for="clr in tp.type">{{clr.color}}</o></span>-->
                    </div>
                  </flexbox-item>
                </flexbox>
              </div>
            </swipeout-item>
          </div>
        </flexbox-item>
      </flexbox>
    </swipeout>
  </div>
</template>

<script>
  import $ from 'jquery'
  import { XInput, XButton, Group, Flexbox, FlexboxItem, TransferDom, Swipeout, SwipeoutItem, SwipeoutButton, XImg } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XInput,
      XButton,
      Group,
      Flexbox,
      FlexboxItem,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
      XImg
    },
    name: 'dealDtl',
    data () {
      return {
          orderList: []
      }
    },
    methods: {
      loadList () {
        let self = this
        self.orderList = JSON.parse(localStorage.getItem('order'))
      },
      onDel (id) {
        let self = this
        this.$vux.confirm.show({
          title: '确定删除?',
          content: '',
          onCancel () {
            console.log('plugin cancel')
          },
          onConfirm () {
            $.each(self.orderList, function (k) {
              if (self.orderList[k].orderId == id) {
                self.orderList.splice(k, 1)
                let obj = self.orderList
                obj = JSON.stringify(obj)
                localStorage.setItem('order', obj)
              }
            })
          }
        })
      }
    },
    mounted () {
        this.loadList()
    }
  }
</script>

<style scoped>
  .flex-demo{
    text-align: center;
  }
  .bd{
    border-bottom: 1px solid #000;
  }
  .order{
    border: 1px solid #000;
  }
  .demo-content{
    padding: 8px 10px 8px 8px;
  }
</style>
